<template>
  <div>
    <Upload v-if="apiSrc" id="iviewUp" :show-upload-list="false" :on-progress="handleProgressQuill" :on-success="handleSuccessQuill" :on-error="handleErrorQuill" :format="['doc', 'docx', 'xlsx', 'xls']" :headers="header" :multiple="multiple" :name="name" :max-size="2048" :action="url" :on-format-error="onFormatError">
      {{ label }}
    </Upload>
    <Spin fix v-show="loading">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
    </Spin>
  </div>
</template>

<script>
export default {
  name: 'formUpload',
  props: {
    label: String, // 按钮文字
    apiSrc: String, // 上传接口
    name: String, // 上传的文件字段名
    multiple: Boolean || false,
    url: String,
  },
  data() {
    return {
      loading: false,
      header: '',
    }
  },
  created() {
    // this.url = this.apiSrc
    this.header = {
      Authorization: 'Bearer ' + localStorage.getItem('adminohoqicbi=='),
    }
  },
  methods: {
    // 文件类型校验
    onFormatError() {
      this.$Message.error('只允许上传doc,docx,xlsx,xls格式的文件')
    },
    // 上传失败
    handleErrorQuill() {
      this.loading = false
      this.$Message.error('文件上传失败')
    },
    // 上传成功
    handleSuccessQuill(res) {
      console.log(res)
      if (!res.status) {
        this.$Message.warning(res.message)
      } else {
        // 父亲传子
        this.$emit('get-data', res.data)
      }
      this.loading = false
    },
    // 上传中
    handleProgressQuill() {
      this.loading = true
    },
  },
}
</script>

<style scoped lang="less">
#iviewUp {
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  border: none;
  text-align: center;
  box-sizing: border-box;
}
/deep/ .ivu-upload-select {
  width: 100% !important;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
</style>
